<template>
  <div class="weekhourComment"
      v-loading="loading"
      element-loading-text="正在生成各星期的小时评论数分布图 "
      element-loading-spinner="el-icon-loading"
  >
      <div class="sample_dis" v-show="loading===false">
          <img :src="starImg" alt="">
          <span>各星期的小时评论数分布图</span>
          <p>周一到周日的小时评论分布较为类似，评论的高峰出现在，中午11点、下午4点以及晚上10点，周五晚活跃的用户更多，可能是第二天可以不用上班。大多数用户可以睡懒觉的缘故，所以才会出现一个高峰现象</p>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            starImg:require('../assets/03.jpg'),
            loading:true,
            
        }
    },
    created(){
        setTimeout(() => {
            this.loading = false
        }, 500);
    }
}
</script>

<style lang='scss' scoped>
.weekhourComment{
    margin:75px 15px 15px 15px;
     height: calc(100vh - 150px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /deep/ .el-loading-mask{
        background-color:#fff !important;
    }
    .sample_dis{
        width:80%;
        display: flex;
        flex-direction:column;
        align-items: center;
        
        img{
            width: 100%;
        }
        span{
            color:#898989;
            font-size: 24px;
            line-height: 36px;
        }
        p{
            text-indent: 2em;
            line-height: 1.5;
            font-size:24px;
            padding-top:15px;
        }
    }
}
</style>